<template>
  <div class="home">
     <div v-for="item of play" :key="item.id" class="box">
       <img class="item" :src="item.coverImgUrl" alt="">
       <p>{{item.name}}</p>
     </div>
  </div>
</template>

<script>
import Loading from '../components/Loading.vue'
// @ is an alias to /src
// import axios from 'axios'
export default {
  data(){
    return{
      play:[]
    }
  },
  components:{
    Loading
  },
  name: 'Home',
  mounted(){
    this.axios.get("http://47.108.197.28:3000/top/playlist").then(res=>{
      console.log(res.data)
      this.play = res.data.playlists
    })
  }
}
</script>
<style scoped>
.item{
  width: 200px;
}
.home{
  width: 800px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
}
</style>
